/**
 * 自定义指令文件
 */
import img404 from '@/assets/images/404.png'
import type {App, DirectiveBinding} from 'vue'

let app: App
export default function initDirective(app1: App): void {
  app = app1
  initLazyLoad()
}

// 图片懒加载指令
function initLazyLoad():void {
  let observer: IntersectionObserver
  app.directive('lazy', {
    mounted(el: HTMLImageElement, binding: DirectiveBinding): void {
      // 默认展示404图片
      // el.src = img404
      // 如果发生错误，展示404图片
      el.onerror = (err) => {
        console.error(err)
        el.src = img404
      }
      // 绑定观察者
      observer = new IntersectionObserver(([{isIntersecting}]) => {
        // 如果元素进入可视区域，将元素src替换为真实链接
        if (isIntersecting) {
          // 移除监听
          observer.unobserve(el)
          // 替换链接
          el.src = binding.value
        }
      })
      // 将el添加到观察列表中
      observer.observe(el)
    },
    beforeUnmount(el: HTMLImageElement): void {
      // 元素销毁前停止监听
      observer.disconnect()
    }
  })
}